<template>
	<!-- 商品列表的查询条件：1、品牌id（下拉框）  2、三个分类id（级联选择器） -->
	<div class="search-div">
		<el-form label-width="70px" size="small">
			<el-row>
				<el-col :span="12">
					<el-form-item label="品牌">
						<el-select
							class="m-2"
							v-model="queryDto.brandId"
							placeholder="选择品牌"
							size="small"
							style="width: 100%"
						>
							<el-option
								v-for="item in brandList"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="分类">
						<el-cascader
							:props="categoryProps"
							style="width: 100%"
							v-model="searchCategoryIdList"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row style="display:flex">
				<el-button type="primary" size="small" @click="fetchData">
					搜索
				</el-button>
				<el-button size="small" @click="resetData">重置</el-button>
			</el-row>
		</el-form>
	</div>

	<!-- 添加商品的按钮，打开弹窗 -->
	<div class="tools-div">
		<el-button type="success" size="small" @click="addShow">添 加</el-button>
	</div>

	<!-- 商品列表，表格 -->
	<el-table :data="list" style="width: 100%">
		<el-table-column
			prop="sliderUrls"
			label="轮播图"
			#default="scope"
			width="200"
		>
			<div style="height: 50px;float: left;">
				<img
					v-for="(item, index) in scope.row.sliderUrls"
					:key="index"
					:src="item"
					width="50"
				/>
			</div>
		</el-table-column>
		<el-table-column prop="name" label="商品名称" width="160" />
		<el-table-column prop="brandName" label="品牌" />
		<el-table-column prop="category1Name" label="一级分类" />
		<el-table-column prop="category2Name" label="二级分类" />
		<el-table-column prop="category3Name" label="三级分类" />
		<el-table-column prop="unitName" label="计量单位" />
		<el-table-column prop="status" label="状态" #default="scope">
			{{
				scope.row.status == 0
					? '未上架'
					: scope.row.status == 1
					? '上架'
					: '下架'
			}}
		</el-table-column>
		<el-table-column prop="auditStatus" label="审核状态" #default="scope">
			{{
				scope.row.auditStatus == 0
					? '未审核'
					: scope.row.auditStatus == 1
					? '通过'
					: '驳回'
			}}
		</el-table-column>
		<el-table-column label="操作" align="center" width="230" #default="scope">
			<el-button
				type="primary"
				size="small"
				@click="editShow(scope.row)"
				style="padding: 5px; margin-left: 5px;"
			>
				修改
			</el-button>
			<el-button
				type="danger"
				size="small"
				@click="remove(scope.row.id)"
				style="padding: 5px; margin-left: 5px;"
			>
				删除
			</el-button>

			<!-- 什么时候显示审批按钮？ -->
			<el-button
				v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == -1"
				type="success"
				size="small"
				@click="audit(scope.row.id)"
				style="padding: 5px; margin-left: 5px;"
			>
				审批
			</el-button>

			<el-button
				v-if="scope.row.auditStatus == 1 && scope.row.status != 1"
				type="warning"
				size="small"
				@click="updateStatus(scope.row.id, 1)"
				style="padding: 5px; margin-left: 5px;"
			>
				上架
			</el-button>
			<el-button
				v-if="scope.row.auditStatus == 1 && scope.row.status == 1"
				type="warning"
				plain
				size="small"
				@click="updateStatus(scope.row.id, -1)"
				style="padding: 5px; margin-left: 5px;"
			>
				下架
			</el-button>

			<el-button
				type="success"
				size="small"
				@click="showSkuList(scope.row)"
				style="padding: 5px; margin-left: 5px;"
			>
				查看sku列表
			</el-button>
		</el-table-column>
	</el-table>

	<!-- 分页控件 -->
	<el-pagination
		v-model:current-page="pageParams.page"
		v-model:page-size="pageParams.limit"
		:page-sizes="[10, 20, 50, 100]"
		layout="total, sizes, prev, pager, next"
		:total="total"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
	/>

	<!-- 添加或修改 商品，弹窗 -->
	<el-dialog v-model="dialogVisible" title="添加或修改" width="80%">
		<el-form
			label-width="120px"
			style="margin-top: 10px;"
			:label-position="labelPosition"
		>
			<el-collapse v-model="activeNames">
				<el-collapse-item title="商品基本信息" name="productBaseInfo">
					<el-form-item label="商品名称">
						<el-input v-model="product.name" />
					</el-form-item>
					<el-form-item label="分类">
						<el-cascader
							style="width: 100%;"
							:props="categoryProps"
							v-model="categoryIdList"
							@change="categoryChange"
						/>
					</el-form-item>
					<el-form-item label="品牌">
						<el-select
							class="m-2"
							placeholder="选择品牌"
							v-model="product.brandId"
							style="width: 100%;"
						>
							<el-option
								v-for="item in categoryBrandList"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="商品单元">
						<el-select
							v-model="product.unitName"
							style="width: 100%;"
							class="m-2"
							placeholder="商品单元"
						>
							<el-option
								v-for="item in unitList"
								:key="item.id"
								:label="item.name"
								:value="item.name"
							/>
						</el-select>
					</el-form-item>

					<el-form-item label="轮播图">
						<el-upload
							v-model:file-list="fileList"
							action="http://localhost:8501/admin/system/upload/upload"
							list-type="picture-card"
							multiple
							:on-success="handleSliderSuccess"
							:on-remove="handleRemove"
							:headers="headers"
						>
							<el-icon><Plus /></el-icon>
						</el-upload>
					</el-form-item>
				</el-collapse-item>

				<el-collapse-item title="商品SKU信息" name="skuInfo">
					<el-form-item label="选择规格">
						<el-select
							:disabled="product.id != '' && product.id != undefined"
							v-model="product.specValue"
							style="width: 100%;"
							class="m-2"
							placeholder="选择规格"
							size="default"
							@change="changeSpecValueList"
						>
							<el-option
								v-for="item in specList"
								:key="item.specValue"
								:label="item.specName"
								:value="item.specValue"
							/>
						</el-select>
					</el-form-item>

					<div
						class="specValue"
						v-for="(item, index) in specValueList"
						:key="index"
					>
						<span class="tag-group__title">{{ item.key }}</span>
						<el-tag
							class="tag-group__title"
							type="success"
							effect="dark"
							v-for="(specValue, index) in item.valueList"
							:key="index"
						>
							{{ specValue }}
						</el-tag>
					</div>

					<el-form-item label="商品SKU">
						<el-table :data="product.productSkuList" border style="width: 100%">
							<el-table-column prop="skuSpec" label="规格" width="180" />
							<el-table-column label="图片" #default="scope" width="80">
								<el-upload
									class="avatar-uploader"
									action="http://localhost:8501/admin/system/upload/upload"
									:show-file-list="false"
									:on-success="
										(response, uploadFile, fileList) =>
											handleSkuSuccess(
												response,
												uploadFile,
												fileList,
												scope.row
											)
									"
									:headers="headers"
								>
									<img
										v-if="scope.row.thumbImg"
										:src="scope.row.thumbImg"
										class="avatar"
									/>
									<el-icon v-else class="avatar-uploader-icon">
										<Plus />
									</el-icon>
								</el-upload>
							</el-table-column>
							<el-table-column label="售价" #default="scope">
								<el-input v-model="scope.row.salePrice" />
							</el-table-column>
							<el-table-column label="市场价" #default="scope">
								<el-input v-model="scope.row.marketPrice" />
							</el-table-column>
							<el-table-column label="成本价" #default="scope">
								<el-input v-model="scope.row.costPrice" />
							</el-table-column>
							<el-table-column label="库存数" #default="scope">
								<el-input v-model="scope.row.stockNum" />
							</el-table-column>
							<el-table-column label="重量" #default="scope">
								<el-input v-model="scope.row.weight" />
							</el-table-column>
							<el-table-column label="体积" #default="scope">
								<el-input v-model="scope.row.volume" />
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-collapse-item>
				<el-collapse-item title="商品详情信息" name="productDetails">
					<el-form-item label="详情图片">
						<el-upload
							v-model:file-list="detailsFileList"
							action="http://localhost:8501/admin/system/upload/upload"
							list-type="picture-card"
							multiple
							:on-success="handleDetailsSuccess"
							:on-remove="handleDetailsRemove"
							:headers="headers"
						>
							<el-icon><Plus /></el-icon>
						</el-upload>
					</el-form-item>
				</el-collapse-item>
				<el-collapse-item title="保存修改数据" name="submit" :disabled="true">
					<el-form-item>
						<el-button type="primary" @click="saveOrUpdate">提交</el-button>
						<el-button @click="dialogVisible = false">取消</el-button>
					</el-form-item>
				</el-collapse-item>
			</el-collapse>
		</el-form>
	</el-dialog>

	<!-- 审批当前spu时，打开的弹窗 -->
	<el-dialog v-model="dialogAuditVisible" title="审批" width="80%">
		<el-form :model="product" label-width="120px" style="margin-top: 10px;">
			<el-divider />
			<span style="margin-bottom: 5px;">商品基本信息</span>
			<el-row>
				<el-col :span="12">
					<el-form-item label="商品名称">
						{{ product.name }}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="分类">
						{{ product.category1Name }} => {{ product.category2Name }} =>
						{{ product.category3Name }}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="品牌">
						{{ product.brandName }}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="计量单位">
						{{ product.unitName }}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="创建时间">
						{{ product.createTime }}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="状态">
						{{
							product.auditStatus == 0
								? '未审核'
								: product.auditStatus == 1
								? '通过'
								: '驳回'
						}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="轮播图">
						<img
							v-for="(item, index) in sliderUrlList"
							:key="index"
							:src="item"
							style="width: 50px;"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-divider />
			<span style="margin-bottom: 5px;">商品SKU信息</span>
			<el-form-item label="商品SKU">
				<el-table :data="product.productSkuList" border style="width: 100%">
					<el-table-column prop="skuSpec" label="规格" width="180" />
					<el-table-column label="图片" #default="scope" width="80">
						<img :src="scope.row.thumbImg" style="width: 80px;" />
					</el-table-column>
					<el-table-column label="售价" prop="salePrice" />
					<el-table-column label="市场价" prop="marketPrice" />
					<el-table-column label="成本价" prop="costPrice" />
					<el-table-column label="库存数" prop="stockNum" />
					<el-table-column label="重量" prop="weight" />
					<el-table-column label="体积" prop="volume" />
				</el-table>
			</el-form-item>

			<el-divider />
			<span style="margin-bottom: 5px;">商品详情信息</span>
			<el-form-item label="详情图片">
				<img
					v-for="(item, index) in detailsImageUrlList"
					:key="index"
					:src="item"
					style="width: 80px;"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="success"
					size="large"
					@click="updateAuditStatus(product.id, 1)"
				>
					通过
				</el-button>
				<el-button
					type="success"
					size="large"
					plain
					@click="updateAuditStatus(product.id, -1)"
				>
					驳回
				</el-button>
				<el-button size="large" @click="dialogAuditVisible = false">
					取消
				</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>

	<!-- 查看sku列表的弹窗 -->
	<el-dialog v-model="skuListDialog" title="sku列表" width="80%">
		<el-table :data="productSkuList" border style="width: 100%">
			<el-table-column prop="skuSpec" label="规格" width="180" />
			<el-table-column label="图片" #default="scope" width="80">
				<img :src="scope.row.thumbImg" style="width: 80px;" />
			</el-table-column>
			<el-table-column label="售价" prop="salePrice" />
			<el-table-column label="市场价" prop="marketPrice" />
			<el-table-column label="成本价" prop="costPrice" />
			<el-table-column label="库存数" prop="stockNum" />
			<el-table-column label="重量" prop="weight" />
			<el-table-column label="体积" prop="volume" />
            <el-table-column label="sku上下架状态" #default='scope' >
                {{scope.row.status==1?'已上架':'未上架'}}
            </el-table-column>

			<el-table-column label="操作" #default='scope' v-if='spu.auditStatus==1'>
				<el-button
					type="success"
                    v-if="scope.row.status!=1"
					size="small"
					@click="updateSkuStatus(scope.row.id,1,scope.row.productId)"
					style="padding: 5px; margin-left: 5px;"
				>
					上架
				</el-button>
				<el-button
					type="success"
					size="small"
                    v-if="scope.row.status==1"
					@click="updateSkuStatus(scope.row.id,-1,scope.row.productId)"
					style="padding: 5px; margin-left: 5px;"
				>
					下架
				</el-button>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { useApp } from '@/pinia/modules/app'
	import { ElMessage, ElMessageBox } from 'element-plus'

	import { FindAll } from '@/api/brand.js'

	import { FindByParentId } from '@/api/category.js'

	import {
		GetProductPageList,
		SaveProduct,
		UpdateProductById,
		GetProductById,
		DeleteProductById,
		UpdateProductStatus,
		UpdateProductAuditStatus,
        UpdateSkuStatus
	} from '@/api/product.js'

	import { FindBrandByCategoryId } from '@/api/categoryBrand.js'

	import { FindAllProductUnit } from '@/api/productUnit.js'

	import { FindAllProductSpec } from '@/api/productSpec.js'

	// ----------------------------------------------------分页列表查询 start --------------------------------------------------------------------------
	// 品牌列表数据模型
	const brandList = ref([])

	// 分类列表
	const props = {
		lazy: true,
		value: 'id',
		label: 'name',
		leaf: 'leaf',
		checkStrictly: true,
		async lazyLoad(node, resolve) {
			// 加载数据的方法
			if (typeof node.value == 'undefined') node.value = 0
			const { data } = await FindByParentId(node.value)
			data.forEach(function(item) {
				//hasChildren判断是否有子节点
				item.leaf = !item.hasChildren
			})
			resolve(data) // 返回数据
		},
	}
	const categoryProps = ref(props)

	// 选中的数据模型
	const queryDto = ref({
		brandId: '',
		category1Id: '',
		category2Id: '',
		category3Id: '',
	})
	const searchCategoryIdList = ref([])

	//分页数据
	const pageParamsForm = {
		page: 1, // 页码
		limit: 10, // 每页记录数
	}
	const pageParams = ref(pageParamsForm)

	// 表格数据模型
	const list = ref([])

	// 总记录数数据模型
	const total = ref(0)

	// 钩子函数
	onMounted(async () => {
		//查询所有的品牌
		const { data } = await FindAll()
		brandList.value = data
		fetchData()
	})

	//页面变化
	const handleSizeChange = size => {
		pageParams.value.limit = size
		fetchData()
	}
	const handleCurrentChange = number => {
		pageParams.value.page = number
		fetchData()
	}

	//重置
	const resetData = () => {
		queryDto.value = {}
		searchCategoryIdList.value = []
		fetchData()
	}

	// 分页列表查询方法
	const fetchData = async () => {
		// 处理三级分类的id
		//searchCategoryIdList  级联选择器绑定的数组
		if (searchCategoryIdList.value.length == 1) {
			queryDto.value.category1Id = searchCategoryIdList.value[0]
		}

		if (searchCategoryIdList.value.length == 2) {
			queryDto.value.category1Id = searchCategoryIdList.value[0]
			queryDto.value.category2Id = searchCategoryIdList.value[1]
		}

		if (searchCategoryIdList.value.length == 3) {
			queryDto.value.category1Id = searchCategoryIdList.value[0]
			queryDto.value.category2Id = searchCategoryIdList.value[1]
			queryDto.value.category3Id = searchCategoryIdList.value[2]
		}

		// 请求后端接口（查询商品列表接口）
		// queryDto
		const { data } = await GetProductPageList(
			pageParams.value.page,
			pageParams.value.limit,
			queryDto.value
		)

		//item ?  每个Product对象
		data.list.forEach(item => {
			item.sliderUrls = item.sliderUrls.split(',') //将轮播图字符串转成url数组（表格的第一列遍历轮播图）
		})

		// 将响应结果数据设置给对应的属性模型
		list.value = data.list
		total.value = data.total
	}

	// 控制对话框是否展示的数据模型
	const dialogVisible = ref(false)

	// 表单label对其方式
	const labelPosition = ref('top')

	// 对话框激活的面板
	const activeNames = ref([
		'productBaseInfo',
		'skuInfo',
		'productDetails',
		'submit',
	])

	// 表单数据模型
	const defaultForm = {
		id: '',
		name: '',
		brandId: '',
		category1Id: '',
		category2Id: '',
		category3Id: '',
		unitName: '',
		sliderUrls: '',
		specValue: '',
		productSkuList: [],
		detailsImageUrls: '',
	}
	const product = ref(defaultForm)

	//进入添加
	const addShow = () => {
		props.checkStrictly = false
		dialogVisible.value = true
		//清空
		fileList.value = []
		categoryIdList.value = []
		detailsFileList.value = []
		sliderUrlList.value = []
		specValueList.value = []
		product.value = {}
		fetchProductUnit()
		fetchProductSpect()
	}

	// 分类级联选择器选中数据以后的数据模型
	const categoryIdList = ref([])

	// 分类级联选择器数据发送改变以后的事件处理函数
	const categoryChange = async () => {
		if (categoryIdList.value.length == 3) {
			product.value.category1Id = categoryIdList.value[0]
			product.value.category2Id = categoryIdList.value[1]
			product.value.category3Id = categoryIdList.value[2]
			const { data } = await FindBrandByCategoryId(categoryIdList.value[2])
			categoryBrandList.value = data
			if (product.value.id) {
				product.value.brandId = ''
			}
		}
	}

	// 定义品牌的数据模型
	const categoryBrandList = ref([])

	// 商品单元的数据模型
	const unitList = ref([])

	// 查询所有的商品单元
	const fetchProductUnit = async () => {
		const { data } = await FindAllProductUnit()
		unitList.value = data
	}

	// 商品规格数据数据模型
	const specList = ref([])

	// 查询产品规格数据
	const fetchProductSpect = async () => {
		const { data } = await FindAllProductSpec()
		specList.value = data
	}

	const saveOrUpdate = () => {
		console.log('submit!' + product.value)
		product.value.sliderUrls = sliderUrlList.value.join(',')
		product.value.detailsImageUrls = detailsImageUrlList.value.join(',')
		if (!product.value.id) {
			saveData()
		} else {
			updateData()
		}
	}

	// 新增
	const saveData = async () => {
		await SaveProduct(product.value)
		dialogVisible.value = false
		ElMessage.success('操作成功')
		fetchData()
	}

	// 修改
	const updateData = async () => {
		console.log(product.value)
		await UpdateProductById(product.value)
		dialogVisible.value = false
		ElMessage.success('操作成功')
		fetchData()
	}

	// 展示选择的规则数据
	const specValueList = ref([])
	const changeSpecValueList = () => {
		specValueList.value = JSON.parse(product.value.specValue)
		const specValueArr = []
		specValueList.value.forEach((item, index) => {
			specValueArr.push(item.valueList)
		})

		// last为上次运算的结果，current为数组中的当前元素
		var result = specValueArr.reduce((last, current) => {
			const array = []
			last.forEach(par1 => {
				current.forEach(par2 => {
					array.push(par1 + ' + ' + par2)
				})
			})
			return array
		})

		console.log(result)
		product.value.productSkuList = []
		result.forEach(function(item) {
			product.value.productSkuList.push({
				skuSpec: item,
				price: 0,
			})
		})
	}

	// 上传商品轮播图图片
	const sliderUrlList = ref([])
	const headers = {
		token: useApp().authorization.token, // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
	}
	const handleRemove = (uploadFile, uploadFiles) => {
		sliderUrlList.value.splice(sliderUrlList.value.indexOf(uploadFile.url), 1)
	}
	const fileList = ref([])
	const handleSliderSuccess = (response, uploadFile) => {
		sliderUrlList.value.push(response.data)
	}

	//sku图片
	const handleSkuSuccess = (response, uploadFile, fileList, row) => {
		row.thumbImg = response.data
	}

	// 上传商品详情图片
	const detailsFileList = ref([])
	const handleDetailsRemove = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
		detailsImageUrlList.value.splice(
			detailsImageUrlList.value.indexOf(uploadFile.url),
			1
		)
		console.log(sliderUrlList.value)
	}
	const detailsImageUrlList = ref([])
	const handleDetailsSuccess = (response, uploadFile) => {
		console.log(response)
		detailsImageUrlList.value.push(response.data)
		console.log(detailsImageUrlList.value)
	}

	//进入修改
	const editShow = row => {
		getById(row.id)
		props.checkStrictly = false
		dialogVisible.value = true
	}

	const getById = async id => {
		const { data } = await GetProductById(id)
		product.value = data
		// eslint-disable-next-line no-debugger
		console.log(product.value)

		//分类赋值
		categoryIdList.value = [
			product.value.category1Id,
			product.value.category2Id,
			product.value.category3Id,
		]

		//处理图片
		fileList.value = []
		sliderUrlList.value = product.value.sliderUrls.split(',')
		sliderUrlList.value.forEach(url => {
			fileList.value.push({ url: url })
		})

		// 处理规格数据
		specValueList.value = JSON.parse(product.value.specValue)

		//处理sku
		// product.value.productSkuList.forEach(sku => {
		//   sku.skuSpec = sku.skuSpec.split(',').join(' * ')
		//   sku.skuSpecList = sku.skuSpec.split(',')
		// })

		//处理详情图片
		detailsFileList.value = []
		detailsImageUrlList.value = product.value.detailsImageUrls.split(',')
		detailsImageUrlList.value.forEach(url => {
			detailsFileList.value.push({ url: url })
		})

		//加载分类品牌
		getBrand()
		fetchProductUnit()
		fetchProductSpect()
	}

	const getBrand = async () => {
		const { data } = await FindBrandByCategoryId(categoryIdList.value[2])
		categoryBrandList.value = data
	}

	//删除
	const remove = async id => {
		console.log('removeDataById:' + id)
		ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
			.then(async () => {
				await DeleteProductById(id)
				ElMessage.success('删除成功')
				fetchData()
			})
			.catch(() => {
				ElMessage.info('取消删除')
			})
	}

	const dialogAuditVisible = ref(false)

	//点击审批按钮
	const audit = async id => {
		//第一个请求：根据当前行spu的id查询product（所有数据）
		const { data } = await GetProductById(id)

		product.value = data

		//分类赋值
		categoryIdList.value = [
			product.value.category1Id,
			product.value.category2Id,
			product.value.category3Id,
		]

		//处理图片
		fileList.value = []
		sliderUrlList.value = product.value.sliderUrls.split(',')
		sliderUrlList.value.forEach(url => {
			fileList.value.push({ url: url })
		})

		// 处理规格数据
		specValueList.value = JSON.parse(product.value.specValue)

		//处理详情图片
		detailsFileList.value = []
		detailsImageUrlList.value = product.value.detailsImageUrls.split(',')
		detailsImageUrlList.value.forEach(url => {
			detailsFileList.value.push({ url: url })
		})

		//加载分类品牌
		// getBrand()
		// fetchProductUnit()
		// fetchProductSpect()

		dialogAuditVisible.value = true
	}

	const updateAuditStatus = async (id, auditStatus) => {
		await UpdateProductAuditStatus(id, auditStatus)
		dialogAuditVisible.value = false
		ElMessage.success('操作成功')
		fetchData()
	}

	//上下架
	const updateStatus = async (id, status) => {
		await UpdateProductStatus(id, status)
		dialogAuditVisible.value = false

		//上架成功  下架成功
		ElMessage.success(status == 1 ? '上架成功' : '下架成功')

		fetchData()
	}

	let skuListDialog = ref(false) //sku列表弹窗是否心事
	let productSkuList = ref([]) //弹窗上的sku集合
    //记录的是点击“查看sku列表”按钮时对应的spu对象
    let spu = ref({})

    //查看sku列表 
	let showSkuList = async (row) => {
		skuListDialog.value = true
        spu.value = row
		let { data } = await GetProductById(row.id)
		productSkuList.value = data.productSkuList
	}

    //针对某个sku进行上下架
    let updateSkuStatus =  async (skuId,status,spuId)=>{
        let {code,message} = await UpdateSkuStatus(skuId,status);
        if(code==200){
            //重新加弹窗上的sku列表重新加载一下(根据spu的id查询到product对象)
            let { data } = await GetProductById(spuId)
		    productSkuList.value = data.productSkuList //从product中获取sku列表
        }else{
            ElMessage.warning(( status==1?'上架':'下架' ) + '失败,' + message )
        }
    }

    

</script>

<style scoped>
	.search-div {
		margin-bottom: 10px;
		padding: 10px;
		border: 1px solid #ebeef5;
		border-radius: 3px;
		background-color: #fff;
	}

	.tools-div {
		margin: 10px 0;
		padding: 10px;
		border: 1px solid #ebeef5;
		border-radius: 3px;
		background-color: #fff;
	}

	.tag-group__title {
		margin-right: 10px; /* 调整元素之间的水平间距 */
	}

	.specValue {
		margin-bottom: 10px;
		margin-top: 10px;
		font-size: 14px;
	}

	.avatar-uploader .avatar {
		width: 50px;
		height: 50px;
		display: block;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 50px;
		height: 50px;
		text-align: center;
	}
</style>